<template>
<div class="search">
	<div class="search__engine">
		<a class="search__engine--btn" v-on="click:isOpen=!isOpen" v-class="defaultEngine.type" v-text="defaultEngine.desc">图书查询</a>
		<ul class="search__engine--list" v-class="open:isOpen">
			<li v-repeat="its : engine">
				<a v-text="its.desc" v-class="its.type,current:index===$index" v-on="click:selectEngine($index)"></a>
			</li>
		</ul>
	</div>
	<div class="search__form">
		<form v-attr="action : defaultEngine.link, target : '_blank'">
			<input v-attr="type : 'text', name : defaultEngine.name"  autocomplete="off">
            <input type="submit" value="搜索">
		</form>
	</div>
</div>
</template>

<script>
module.exports = {
	data : function(){
		return {
			defaultEngine : {
				desc : "图书查询",
				link : "http://lib.changxiaoyuan.com/",
				type : "lib",
				name : "keyword"
			},
			isOpen : false,
			index : 0,
			engine : [
				{
					desc : "图书查询",
					link : "http://lib.changxiaoyuan.com/",
					type : "lib",
					name : "keyword"
				},
				{
					desc : "百度搜索",
					link : "http://www.baidu.com/s",
					type : "baidu",
					name : "wd"
				},
				{
					desc : "必应搜索",
					link : "http://cn.bing.com/search",
					type : "bing",
					name : "q"
				},
				{
					desc : "谷歌搜索",
					link : "http://www.google.com.hk/search",
					type : "google",
					name : "q"
				},
				{
					desc : "搜狗搜索",
					link : "http://sogou.com/web",
					type : "sougou",
					name : "query"
				}
			],
		}
	},
	methods : {
		selectEngine : function(index){
			this.index = index;
			this.setDefaultEngine(this.engine[index]);
			this.isOpen = !this.isOpen;
		},
		setDefaultEngine : function(data){
			for (var i in data) {
				this.defaultEngine[i] = data[i];
			}
		}
	}
}
</script>